<template>
  <div class="wrap" v-loading="loading">
    <div class="content">


      <div class="step-content" v-show="step === 1">
        <h4>1.{{ $t('middle.按店铺选择要中转送仓商品和数量') }}</h4>
        <div v-if="$store.getters.platformNum > 1">
          <el-button class="mgb10" :disabled="loading" size="medium" :type="goodsParams.accountType === getMercadoName() ? 'primary' : ''" @click="changeAccountType(getMercadoName())" v-if="$store.getters.accountMKD">{{$t('shipment.mercadoFull')}}</el-button>
          <el-button class="mgb10" :disabled="loading" size="medium" :type="goodsParams.accountType === getFalabellaName() ? 'primary' : ''" @click="changeAccountType(getFalabellaName())" v-if="$store.getters.accountFalabella">{{$t('shipment.falabellaFull')}}</el-button>
          <el-button class="mgb10" :disabled="loading" size="medium" :type="goodsParams.accountType === getShopeeName() ? 'primary' : ''" @click="changeAccountType(getShopeeName())" v-if="$store.getters.accountShopee">{{$t('shipment.shopeeFull')}}</el-button>
          <el-button class="mgb10" :disabled="loading" size="medium" :type="goodsParams.accountType === getSheinName() ? 'primary' : ''" @click="changeAccountType(getSheinName())" v-if="$store.getters.accountShein">{{$t('shipment.sheinFull')}}</el-button>
          <el-button class="mgb10" :disabled="loading" size="medium" :type="goodsParams.accountType === getAmazonName() ? 'primary' : ''" @click="changeAccountType(getAmazonName())" v-if="$store.getters.accountAmazon">{{$t('shipment.amazonFull')}}</el-button>
          <el-button class="mgb10" :disabled="loading" size="medium" :type="goodsParams.accountType === getTikTokName() ? 'primary' : ''" @click="changeAccountType(getTikTokName())" v-if="$store.getters.accountTikTok">{{$t('shipment.tiktokFull')}}</el-button>
        </div>

        <div class="warehouse-list" v-if="warehouseList.length > 1">
          海外仓仓库：
          <el-button
            class="mgb10"
            v-for="item in warehouseList"
            :key="item.id"
            :type="currentForm.warehouseId === item.id ? 'primary' : ''"
            @click="chooseWarehouse2(item)"
            :disabled="loading"
          >
            {{item.warehouseName}}
          </el-button>
        </div>

        <div class="account-list" v-if="currentAccountList.length > 1">
          {{ $t('table.store') }}：
          <el-button
            class="mgb10"
            v-for="account in currentAccountList"
            size="mini"
            :key="account.accountId"
            :type="goodsParams.ogAccountId === account.accountId ? 'primary' : ''"
            @click="chooseAccount(account)"
            :disabled="loading"
          >{{account.showName}}</el-button>
        </div>

        <div class="warehouse-list">
          送仓仓库：
          <el-button
            class="mgb10"
            size="mini"
            v-for="warehouseItem in officialWarehouseList"
            :key="warehouseItem.id"
            :type="currentForm.officialWarehouseId === warehouseItem.id ? 'primary' : ''"
            @click="chooseWarehouse(warehouseItem)"
            :disabled="loading"
          >
            {{warehouseItem.showName}}
          </el-button>
        </div>

        <!--  送仓方式  -->
        <div class="send-type">
          {{ $t('middle.送仓方式') }}：
          <el-button
            v-for="sendItem in showSendTypeList"
            :key="sendItem.type"
            :type="currentForm.sendType === sendItem.type ? 'primary' : ''"
            @click="chooseSendType(sendItem.type)"
            size="mini"
            :disabled="loading"
          >
            <template v-if="sendItem.type === sendType.mergeSend">
              {{ $t('middle.合并送仓') }}
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>{{ $t('middle.跟随仓库排期合并送仓，仅收取常规送仓费用') }}</template>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template>
            <template v-else-if="sendItem.type === sendType.charteredCarSend">
              {{ $t('middle.包车送仓') }}
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>{{ $t('middle.自定时间包车送仓，除常规送仓费用外额外收取包车费用') }}</template>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template>
            <template v-else-if="sendItem.type === sendType.expressSend">
              {{ $t('middle.快递送仓') }}
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>{{ $t('middle.所选仓库位置偏远，仅支持快递送仓，送仓费用需加收快递运费') }}</template>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template>

          </el-button>
        </div>




        <div>
          <div>
            <div class="step-tips">
              <div style="display: inline;font-size: 14px">
                <div class="mgr10" style="display: inline-block">
                  {{$t('shipment.step2Tips4')}}：<span class="font-blue">{{currentSkuNum}}</span>
                </div>
                <div style="display: inline-block">
                  {{$t('shipment.step2Tips5')}}：<span class="font-blue">{{currentGoodsNum}}</span>
                </div>
              </div>

            </div>
            <div class="search mgt20">
              <el-input
                v-model="goodsParams.keyword"
                :placeholder="$t('common.searchForCompleteListingIDorSKU')"
                style="width: 250px; margin-right: 10px; margin-bottom: 10px"
                @keyup.enter.native="searchGoods()"
                clearable
                @clear="searchGoods()"
              >
              </el-input>
              <el-button class="mgr10" size="small" type="primary" @click="searchGoods()">{{$t('common.search')}}</el-button>

              <!--     先隐藏 不处理       -->
              <el-button size="small" type="primary" @click="importDialog = true" v-if="false">{{$t('middle.从货件单导入')}}</el-button>
            </div>
          </div>
        </div>

        <div class="goods-table" >
          <!--   官方仓商品    -->
          <el-table
            border
            :data="goodsData"
            v-loading="goodsLoading"

          >
            <el-table-column
              :label="$t('table.productCover')"
              align="center"
              width="120"
              fixed="left"
            >
              <template slot-scope="{row}">
                <div class="img-box img-one">
                  <img :src="row.image" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.title')"
              align="left"
              min-width="300"
            >
              <template slot-scope="{row}">
                {{row.title}}
                <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.ListingIDAndSKU')"
              align="left"
              min-width="300"
            >
              <template slot-scope="{row}">
                {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
              </template>
            </el-table-column>
            <m-l-code-column></m-l-code-column>
            <el-table-column
              :label="$t('table.当前店铺中转送仓库存')"
              align="center"
              width="200"
              prop="middleBoxStockNum"
            >
            </el-table-column>
            <el-table-column
              :label="$t('table.仓库总中转送仓库存',{warehouseName: getWareHouseName()})"
              align="center"
              width="200"
              prop="totalMiddleStockNum"
            >
            </el-table-column>
            <el-table-column
              :label="$t('table.本次中转送仓数量')"
              align="center"
              width="200"
              prop="currentMiddleNum"
              fixed="right"
            >
              <template v-slot="{row}">
                <template v-if="chooseGoodsList.find(item=> row.id === item.id)">
                  <el-button @click="showSendDialog(row)" type="warning">{{ $t('middle.修改送仓数量') }}</el-button>
                </template>
                <template v-else>
                  <el-button @click="showSendDialog(row)" type="primary">{{ $t('middle.编辑送仓数量') }}</el-button>
                </template>
              </template>
            </el-table-column>

          </el-table>

          <!-- 仓库商品 -->

          <div class="page-wrap">
            <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :current-page.sync="goodsParams.page"
              :page-size="goodsParams.pageSize"
              :total="total"
              @current-change="getGoods"
            >
            </el-pagination>
          </div>
        </div>
        <div class="step-tips">
          {{$t('shipment.step2Tips6')}}
        </div>

        <div class="step-tips" v-if="false">
          {{ $t('middle.step1Tips1') }}
        </div>
      </div>
      <!-- 第二步 -->
      <div class="step-content" v-show="step === 2">
        <div>
          <h4>2. {{ $t('middle.确认本次中转送仓商品数量') }}</h4>
          <div class="goods-table">
           <!-- <div v-if="goodsStraightTable.length > 0">
              <h4>{{ $t('middle.无需调货贴标商品详细情况') }}：</h4>
              <el-table
                :data="goodsStraightTable"
                border
                style="width: 1400px"
              >
                <el-table-column
                  :label="$t('table.productCover')"
                  align="center"
                  width="120"
                  fixed="left"
                >
                  <template slot-scope="{row}">
                    <div class="img-box img-one">
                      <img :src="row.image" alt="">
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('table.title')"
                  align="left"
                  min-width="300"
                >
                  <template slot-scope="{row}">
                    {{row.title}}
                    <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('table.ListingIDAndSKU')"
                  align="left"
                  min-width="300"
                >
                  <template slot-scope="{row}">
                    {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
                  </template>
                </el-table-column>
                <m-l-code-column></m-l-code-column>

                <el-table-column
                  :label="$t('table.预计从中转送仓调出')"
                  align="center"
                  width="200"
                >
                  <template v-slot="{row}">
                    <div
                      v-for="(item,index) in row.boxInfo"
                      :key="index"
                    >
                      {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  :label="$t('table.预计中转送仓总数')"
                  align="center"
                  width="200"
                >
                  <template v-slot="{row}">
                    {{getStraightSendNum(row)}}
                  </template>
                </el-table-column>



              </el-table>
            </div> -->

           <div v-if="chooseGoodsList.length > 0">
              <h4>送仓商品详情：</h4>
              <el-table
                :data="chooseGoodsList"
                border
                :span-method="objectSpanMethod1"
                style="width: 1800px"
              >
                <el-table-column
                  :label="$t('table.productCover')"
                  align="center"
                  width="120"
                  fixed="left"
                  prop="image"
                >
                  <template slot-scope="{row}">
                    <div class="img-box img-one">
                      <img :src="row.image" alt="">
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('table.title')"
                  align="left"
                  min-width="300"
                  prop="title"
                >
                  <template slot-scope="{row}">
                    {{row.title}}
                    <div class="goods-SKU-info">
                      <span
                        v-for="attr in row.attributes"
                        :key="attr.name"
                        class="attr"
                      >
                        {{attr.name}} : {{attr.value}}
                        <span class="attr-link"> | </span>
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('table.ListingIDAndSKU')"
                  align="left"
                  min-width="300"
                  prop="goodsId"
                >
                  <template slot-scope="{row}">

                    {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
                  </template>
                </el-table-column>
                <!-- <m-l-code-column></m-l-code-column> -->
                <el-table-column
                  label="产品标"
                  align="left"
                  min-width="300"
                  prop="fromGoodsId"
                >
                  <template v-slot="{row}">
                    <template v-if="row.fromIsTB">
                      {{ $t('shipment.Not labeled') }}
                    </template>
                    <template v-else>
                     {{row.fromInventoryId ? `${row.fromInventoryId}` : ''}}
                    </template>
                  </template>
                </el-table-column>
        <!--        <m-l-code-column
                  prop="fromInventoryId"
                  :label="$t('table.调货MLCode')"
                ></m-l-code-column> -->

                <el-table-column
                  :label="$t('table.预计从中转送仓调出')"
                  align="center"
                  width="200"
                >
                  <template v-slot="{row}">
                    <div
                      v-for="(item,index) in row.boxInfo"
                      :key="index"
                    >
                      {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  :label="$t('table.预计中转送仓总数')"
                  align="center"
                  width="200"
                  prop="sumSendNum"
                >
                  <template v-slot="{row}">
                    {{getDistributionSendNum(row)}}
                  </template>
                </el-table-column>



              </el-table>
            </div>

          </div>


        </div>
      </div>

      <div class="step-content" v-show="step === 3" v-loading="calLoading">
        <div>
          <h4>3. {{ $t('middle.确认送仓费用并上传箱标、送仓单') }}</h4>
          <el-card class="box-card">
            <div class="line">
              <div class="label">{{ $t('table.store') }}：</div>
              <div class="item">{{ account.showName }}</div>
            </div>
            <div class="line">
              <div class="label">送仓仓库：</div>
              <div class="item">{{ warehouse.showName }}</div>
            </div>
            <div class="line">
              <div class="label">{{ $t('middle.送仓方式') }}：</div>
              <div class="item">{{ getMiddleSendTypeStr(currentForm.sendType) }}</div>
            </div>
            <div class="line">
              <div class="label">{{ $t('table.箱子数量') }}：</div>
              <div class="item">{{ currentBoxNum }}</div>
              <div class="label mgl10">{{ $t('table.送仓SKU种数') }}：</div>
              <div class="item">{{ currentSkuNum }}</div>
              <div class="label mgl20">{{ $t('table.送仓商品总数量') }}：</div>
              <div class="item">{{ currentGoodsNum }}</div>
            </div>
          <!--  <div class="line">
              <div class="label">{{ $t('table.送仓费用（元）') }}：</div>
              <div class="item">{{calInfo.transfer2warehouse}}</div>
              <template v-if="currentForm.sendType === sendType.charteredCarSend">
                <div class="label mgl20">{{ $t('table.包车费用（元）') }}：</div>
                <div class="item">{{calInfo.charteredCarFee}}</div>
              </template>
              <template v-if="goodsDistributionTable.length > 0">
                <div class="label mgl20">{{$t('table.贴SKU标费用（元）')}}：</div>
                <div class="item">{{ calInfo.labelFee }}</div>
              </template>
              <div class="label mgl20">{{ $t('table.贴外箱标费用（元）') }}：</div>
              <div class="item">{{ calInfo.boxLabelFee }}</div>

            </div>
            <div class="line">
              <div class="label">{{ $t('table.预计总费用（元）') }}：</div>
              <div class="item">{{ exTotalFee }}</div>
            </div> -->
          </el-card>
        </div>
        <div class="mgt20">
           <h4>{{ $t('middle.费用信息') }}</h4>
            <el-table
                 :data="calInfoFee"
                 border
                 style="width: 100%">
                 <el-table-column
                   prop="transfer2warehouse"
                   :label="$t('table.送仓费用（元）')"
                   min-width="180"
                   align="center">
                 </el-table-column>
                 <el-table-column
                   prop="charteredCarFee"
                    :label="$t('table.包车费用（元）')"
                   min-width="180"
                   align="center">
                 </el-table-column>
                 <el-table-column
                   prop="labelFee"
                  :label="$t('table.贴SKU标费用（元）')"
                  min-width="180"
                  align="center">
                 </el-table-column>
                 <el-table-column
                   prop="boxLabelFee"
                  :label="$t('table.贴外箱标费用（元）')"
                  min-width="180"
                  align="center">
                 </el-table-column>
                 <el-table-column
                   prop="exTotalFee"
                  :label="$t('table.预计总费用（元）')"
                  min-width="180"
                  align="center">
                 <template >
                   <span style="margin-left: 10px">{{ exTotalFee }}</span>
                 </template>
                 </el-table-column>
               </el-table>
        </div>
        <div class="mgt20">
          <div class="font-bold f14">{{ $t('middle.箱标') }}</div>
          <div class="box-content f14 font-grey">
            <div style="margin-top:5px">
              {{ $t('middle.请根据本次送仓箱子数量到美客多后台添加送仓货件获取箱标并在此处上传，以供仓库人员打印粘贴送仓') }}
            </div>
          </div>
          <upload-middle-file
            class="mgt10"
            :file="currentForm.boxPDF"
            :upload-file-text="$t('common.上传文件')"
            :edit-file-text="$t('common.修改文件')"
            @uploadFileSuccess="uploadBoxPDFSuccess"
          ></upload-middle-file>
        </div>

        <div class="mgt20">
          <div class="font-bold f14">{{ $t('middle.送仓单') }}</div>
          <div class="box-content f14 font-grey">
            <div style="margin-top:5px">
              {{ $t('middle.本土店铺如由卖家预约送仓，请上传送仓单。跨境店铺请忽略') }}
            </div>
          </div>
          <upload-middle-file
            class="mgt10"
            :file="currentForm.middlePDF"
            :upload-file-text="$t('common.上传文件')"
            :edit-file-text="$t('common.修改文件')"
            @uploadFileSuccess="uploadMiddlePdfSuccess"
          ></upload-middle-file>
        </div>

        <div class="remark">
          <h4>{{$t('shipment.step4Text10')}}：</h4>
          <el-input type="textarea" style="width: 1200px" :placeholder="$t('shipment.step4Text11')" v-model="remark"></el-input>
        </div>
      </div>

    </div>



    <el-dialog
      :title="$t('middle.从货件单导入')"
      :visible.sync="importDialog"
      width="650px"
    >
      <div>
        <div class="mgb10">{{ $t('middle.请上传本次库存中转的货件单') }}</div>
        <upload-shipment
          :data-obj="{
            ogAccountId: goodsParams.ogAccountId
          }"
          :import-data="importData"
          @uploadShipmentFinish="uploadShipmentFinish"
        ></upload-shipment>

        <div class="upload-content">
          <div class="content mgt20">
            <div>1.{{ $t('middle.PDF文档（货件单）') }}:</div>
            <div>{{ $t('middle.货件单是指在美客多后台添加货件时，') }}</div>
            <div>{{ $t('middle.在确认完本次入仓商品的数量后，确认运输方式和仓库信息前，下载的商品信息表') }}</div>
            <el-link type="primary" :underline="false" @click="showShipmentImage">{{ $t('middle.点击查看示意图') }}</el-link>
            <el-image
              v-show="false"
              ref="shipmentImage"
              :preview-src-list="[
                shipmentImage
              ]"
            >
            </el-image>
          </div>

          <div class="content mgt20">
            <div>2.{{$t('middle.Excel表格：')}}</div>
            <div>{{$t('middle.您也可以先下载Excel模板，完善表格内容后再上传')}}</div>
            <el-link type="primary" :underline="false" :href="exportTemplate" target="_blank">{{$t('middle.下载Excel模板')}}</el-link>
          </div>
        </div>

      </div>
    </el-dialog>

    <el-dialog
      :title="$t('middle.货件单导入结果')"
      :visible.sync="importResultDialog"
      class="import-dialog"
    >
      <div
        style="margin-top: -20px"
        class="mgb10"
        v-html="$t('middle.货件单导入结果详情',{successNum: importData.goodsData.length,failNum: importData.failData.length})">
      </div>
      <div
        v-for="item in importData.failData"
        :key="item.goodsId + item.sku"
        style="margin-bottom: 5px"
      >
        {{item.goodsId}} {{item.sku ? `(${item.sku})` : item.sku}} | {{ $t('middle.失败原因：') }} {{item.message}}
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('middle.选择调货库存')"
      :visible.sync="distributionDialog"
      width="1000px"
    >
      <div>
        <div>{{ $t('middle.请选择填写从那个库存调出到本次中转') }}</div>
        <div>{{ $t('table.需要调货数量') }}: {{distributionGoods.needDistributionNum}}</div>
        <el-table
          :data="distributionGoods.otherGoodsList ? distributionGoods.otherGoodsList : []"
          row-key="id"
          border
        >
          <el-table-column
            :label="$t('table.ListingIDAndSKU')"
            align="left"
            min-width="300"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
              <template v-if="row.isGoods">
                {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
              </template>
              <template v-else>
                {{ $t('shipment.Not labeled') }}
              </template>
            </template>
          </el-table-column>
          <m-l-code-column></m-l-code-column>
          <el-table-column
            :label="$t('table.当前店铺中转送仓库存')"
            align="center"
            width="200"
            prop="middleStockNum"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.调出库存')"
            align="center"
            width="200"
            prop="distributionNum"
          >
            <template v-slot="{row}">
              <el-input-number
                :step="1"
                :precision="0"
                :min="0"
                :max="Math.min(row.middleStockNum,distributionGoods.needDistributionNum)"
                :disabled="row.middleStockNum === 0"
                v-model="row.distributionNum"
              >
              </el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="distributionDialog = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="addDistributionGoodsData">{{$t('common.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('middle.编辑送仓数量')"
      :visible.sync="editSendNumDialog"
      width="1000px"
    >
      <div>
        <div>{{$t('middle.请填写本次中转送仓商品的箱数')}}</div>
        <div>
          <el-table
            border
            :data="editSendGoods.table"
            :span-method="objectSpanMethod2"
          >
            <el-table-column
              :label="$t('table.ListingIDAndSKU')"
              align="left"
              min-width="300"
              show-overflow-tooltip
              prop="goodsId"
            >
              <template v-slot="{row}">
             <template v-if="row.isTB">
               {{ $t('shipment.Not labeled') }}{{row.sku ? `(${row.sku})` : `(${editSendGoods.goods.sku})`}}
             </template>
             <template v-else>
               {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
             </template>
              </template>
            </el-table-column>
           <!-- <el-table-column
              label="MLCode"
              align="center"
              min-width="150"
              prop="inventoryId"
            ></el-table-column> -->
            <m-l-code-column></m-l-code-column>
            <el-table-column
              :label="$t('table.库存总数')"
              align="center"
              min-width="150"
              prop="sumStockNum"
            >
              <template v-slot="{row}">
                {{getEditSumStockNum(row)}}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.库存明细')"
              align="center"
              min-width="150"
              prop="stockList"
            >
              <template v-slot="{row}">
                {{$t('table.num/箱',{num: row.goodsNumInBox})}} × {{row.middleStockNum}}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.送仓箱数')"
              align="center"
              min-width="150"
              prop="stockList"
            >
              <template v-slot="{row}">
                <el-input-number
                  v-model="row.editNum"
                  :min="0"
                  :max="row.middleStockNum"
                  :precision="0"
                ></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editSendNumDialog = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="addChooseGoodsList">{{$t('common.confirm')}}</el-button>
      </div>
    </el-dialog>

    <div class="footer">
      <template v-if="step === 1">
        <el-button @click="back">{{$t('shipment.cancel')}}</el-button>
      </template>
      <template v-if="step !== 1">
        <el-button @click="step--">{{$t('common.prev')}}</el-button>
      </template>
      <template v-if="step !== 3">
        <el-button @click="nextStep" type="primary">{{$t('shipment.next')}}</el-button>
      </template>
      <template v-else>

        <el-button type="primary" @click="confirmMiddle" :loading="btnLoading">{{$t('common.confirm')}}</el-button>

      </template>
    </div>
  </div>
</template>

<script>
import {
  deepCopy,
  getFalabellaName,
  getMercadoName,
  getShopeeName,
  getSheinName,
  getTikTokName,
  getAmazonName
} from "@/utils";
import {getAllAccountList} from "@/api/account";
import {
  calMiddleFee,
  getImportTemplateData,
  getMiddleAllAccountList,
  getMiddleFee,
  getMiddleWorkGoodsList,
  saveMiddleWorkOrder
} from "@/api/middleWork";
import UploadShipment from "@/views/middleWork/components/UploadShipment.vue";
import {jumpLabelOrderInfo, jumpMiddleInfo} from "@/utils/jumpView";
import {getWareHouseName} from "@/utils/common";
import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import {EventBus, rechargeTips, rechargeTipsCode} from "@/utils/eventBus";
import warehouseMixin from "@/views/shipment/mixin/warehouseMixin";
import UploadBoxPDF from "@/views/middleWork/components/UploadBoxPDF.vue";
import UploadMiddleFile from "@/views/middleWork/components/UploadMiddleFile.vue";
import {getMiddleSendTypeStr} from "@/utils/MiddleWork";
import addShippingPlanMixin from "@/views/shipment/mixin/addShippingPlanMixin";

const importStatus = {
  waitingImport: 0, // 待上传 / 上传完成
  importing: 1, // 上传解析中
}

const sendType = {
  mergeSend: 1, // 合并送仓
  charteredCarSend: 2, // 包车送仓
  expressSend: 3, // 快递送仓
}

// 送仓类型
const sendTypeList = [
  {
    type: sendType.mergeSend,
    isMerge: true,
    isCar: false,
    isExpress: false,
  },
  {
    type: sendType.charteredCarSend,
    isMerge: false,
    isCar: true,
    isExpress: false,
  },
  {
    type: sendType.expressSend,
    isMerge: false,
    isCar: false,
    isExpress: true,
  },
]

export default {
  name: "addMiddle",
  components: {UploadMiddleFile, MLCodeColumn, UploadShipment},
  mixins: [warehouseMixin, addShippingPlanMixin],
  props: {
    pStep: {
      default: 1,
    }
  },
  watch: {
    step(){
      this.$emit('update:pStep',this.step)
    }
  },
  data(){
    return {
      step: 1, // 第几步
      loading: false,
      currentForm: {
        accountType: getMercadoName(),
        ogAccountId: 0, // 店铺id
        officialWarehouseId: 0, // 官方送仓仓库
        warehouseId: 0, // 海外仓仓库
        sendType: sendType.mergeSend,
        boxPDF: '', // 箱标文件
        middlePDF: '', // 送仓单文件
      },
      account: {

      }, // 当前店铺的信息
      warehouse: {}, // 仓库的信息
      allAccountList: [], // 用户的所有店铺
      goodsData: [], // 选择的商品
      searchKeyword: '', // 搜索
      chooseGoodsList: [], // 选择的商品
      accountTypeList: [
        getMercadoName(),
        getFalabellaName(),
        getShopeeName(),
        getSheinName(),
        getAmazonName(),
        getTikTokName(),
      ],
      goodsParams: {
        keyword: '',
        page: 1,
        pageSize: 10,
        ogAccountId: 0,
        accountType: getMercadoName(),
      },
      total: 0,
      goodsLoading: false,
      importDialog: false, // 导入货件的dialog
      importResultDialog: false, // 导入货件之后结果的dialog
      importLoading: false,
      importData: {
        status: importStatus.waitingImport,
        goodsData: [], // 成功后返回的商品数据
        failData: [],
      },
      exportTemplate: '', // 导出的模板
      shipmentImage: require('@/assets/images/shipment-image01.png'),
      distributionDialog: false,
      distributionGoods: {}, // 当前选择的调货商品
      transfer2WarehouseFee: 0, // 中转送仓费用
      labelFee: 0, // 贴标费用
      boxLabelFee: 0, // 贴外箱标费
      middleGeneralPrice: [], // 常规费用
      middleExpressPrice: [], // 快递费用
      charteredCarFee: 0, // 包车费用
      remark: '',
      btnLoading: false,
      isSubmit: false,
      sendType,
      sendTypeList,
      editSendNumDialog: false, // 编辑送仓数量dialog
      editSendGoods: {
        goods: {},
        table: [],
      },
      calLoading: false,
      calInfo: {
        transfer2warehouse: 0,
        labelFee: 0,
        charteredCarFee: 0,
        boxLabelFee: 0,
      }, // 计算的信息
      calInfoFee:[],
    }
  },
  computed: {
    currentAccountList() {
      return this.allAccountList.filter(item => item.accountType === this.currentForm.accountType)
    },
    // 当前sku种数
    currentSkuNum(){
      const set = new Set();
      this.chooseGoodsList.forEach(item=>{
        set.add(item.suitId)
      })
      return set.size
    },
    // 当前商品数
    currentGoodsNum() {
      return this.chooseGoodsList.reduce((prev,cur)=>{
        return prev + cur.boxInfo.reduce((_prev,_item)=>{
          return _prev + _item.editNum * _item.goodsNumInBox
        },0)
      },0)
    },
    // 不需要调货的商品数据
    goodsStraightTable(){
      return this.chooseGoodsList.filter(item => {
        return item.suitListId === item.fromSuitListId
      }).sort((a,b) => a.suitId - b.suitId)
    },
    // 需要调货的商品数据
    goodsDistributionTable(){
      return this.chooseGoodsList.filter(item =>{
        return item.suitListId !== item.fromSuitListId
      }).sort((a,b) => a.suitId - b.suitId)
    },

    // 预计贴标费用
    exLabelFee(){
      return 0
    },
    // 预计总费用
    exTotalFee(){
      let sum = 0;
      for (const calInfoElement in this.calInfo) {
        sum += this.calInfo[calInfoElement]
      }
      return Number(sum.toFixed(2))
    },
    // 当前的箱子数量
    currentBoxNum(){
      return this.chooseGoodsList.reduce((prev,cur)=>{
        return prev + cur.boxInfo.reduce((_prev,_cur)=>{
          return _prev + _cur.editNum
        },0)
      },0)
    },
    // 仓库
    showOfficialWarehouseList(){
      return this.officialWarehouseList.filter(item=>{
        switch (this.currentForm.sendType){
          case sendType.mergeSend:
            return item.isMerge;
          case sendType.charteredCarSend:
            return item.isCar;
          case sendType.expressSend:
            return item.isExpress;
          default:
            return false
        }
      })
    },
    showSendTypeList(){
      return this.sendTypeList.filter(item=>{
        if(this.warehouse.isMerge && item.isMerge){
          return true
        }
        if(this.warehouse.isCar && item.isCar){
          return true
        }
        if(this.warehouse.isExpress && item.isExpress){
          return true
        }
        return false
      })
    }
  },
  created() {
    // 获取可送仓的仓库
    this.getOfficialWarehouseList()

    // 获取模板数据
    this.getImportTemplateData()

    // 获取所有店铺
    this.getAllAccountList()

  },
  methods:{
    getMiddleSendTypeStr,
    getWareHouseName,
    getMercadoName,getFalabellaName,getShopeeName,getSheinName,getTikTokName,getAmazonName,
    finishWarehouseApi(){
      if(this.officialWarehouseList.length > 0 && this.warehouseList.length > 0){
        this.currentForm.warehouseId = this.warehouseList[0].id
        this.officialWarehouseList.some(item=>{
          this.chooseWarehouse(item)
          return true;
        })
      }
    },
    getImportTemplateData(){
      getImportTemplateData()
        .then(res =>{
          this.exportTemplate = res.data.excelTemplate
        })
    },
    getAllAccountList(){
      this.loading = true
      getMiddleAllAccountList()
        .then(res=>{
          this.loading = false
          this.accountList = [];
          res.data.forEach(item=>{
            this.accountList.push({
              accountId: item.id,
              showName: item.showName,
              goodsNum: item.goodsNum,
              accountType: item.accountType,
              // accountTypeNum: item.accountTypeNum,
              // fullGoodsNum: item.fullGoodsNum, // 官方仓商品数
            })
          })
          this.allAccountList = deepCopy(this.accountList)
          this.goodsParams.ogAccountId = 0
          this.currentAccountList.some(item=>{
            this.chooseAccount(item)
            return true
          })
        })
    },
    getMiddleFee(){
      getMiddleFee()
        .then(res=>{
          this.labelFee = res.data.labelFee
          this.transfer2WarehouseFee = res.data.transfer2WarehouseFee
        })
    },
    changeAccountType(accountType){
      if(accountType === this.goodsParams.accountType){
        return;
      }
      this.goodsParams.accountType = accountType
      this.currentAccountList.some(item=>{
        this.chooseAccount(item)
        return true
      })
    },
    chooseAccount(account){
      if(account.accountId === this.goodsParams.ogAccountId){
        return;
      }


      const haveGoods = this.chooseGoodsList.length > 0
      if(haveGoods){
        this.$warning(this.$t('middle.切换店铺将清除当前已编辑商品数据'), {
          title: this.$t('middle.确定切换店铺？'),
        })
          .then(res=>{
            // 点击了确定
            this.chooseAccountStep2(account)
          })
          .catch(res=> {
            // 点击了取消
          })
      }else{
        this.chooseAccountStep2(account)
      }


    },
    chooseWarehouse2(warehouse){
      if(this.currentForm.warehouseId === warehouse.id){
        return;
      }
      const haveGoods = this.chooseGoodsList.length > 0
      new Promise((resolve, reject)=>{
        if(haveGoods){
          this.$warning('切换仓库将清除当前已编辑商品数据', {
            title: '确定切换仓库？',
          })
            .then(res=>{
              // 点击了确定
              this.goodsParams.page = 1
              this.chooseGoodsList = []
              resolve()
            })
            .catch(res=>{
              // 点击了取消
              reject()
            });
        }else{
          resolve()
        }
      })
        .then(()=>{
          this.currentForm.warehouseId = warehouse.id
          this.getGoods()
        })
        .catch(()=>{

        })
    },
    chooseAccountStep2(account){
      this.goodsParams.ogAccountId = account.accountId
      this.account = account
      this.goodsParams.page = 1
      this.chooseGoodsList = []
      this.getGoods()
    },
    // 返回上一页
    back(){
      this.$router.go(-1);
    },
    // 下一步
    nextStep(){
      // 进行下一步的时候计算送仓数量是不是超过了仓库数量 或没有选择任何商品时提示选择商品
      if(this.step === 1){
        if(!this.currentForm.sendType){
          this.$errorMessage('请选择送仓方式');
          return;
        }
        if(!this.currentForm.officialWarehouseId){
          this.$errorMessage('请选择送仓仓库');
          return;
        }
        if(!this.currentSkuNum || !this.currentGoodsNum){
          this.$errorMessage(this.$t('middle.请选择本次中转送仓商品'))
          return;
        }
        const obj = {}
        let sku;
        const flag = this.chooseGoodsList.every(item=>{
          if(!obj[item.suitId]){
            obj[item.suitId] = {
              totalNum: item.totalMiddleStockNum,
              currentNum: 0,
              sku: item.sku
            }
          }
          obj[item.suitId].currentNum += item.currentMiddleNum
          if(obj[item.suitId].currentNum > obj[item.suitId].totalNum){
            sku = item.sku
            return false
          }
          return true
        })

        if(!flag){
          this.$errorMessage(this.$t('middle.本次送仓的sku数量超过了总库存',{sku: sku}))
          return;
        }

      }
      if(this.step === 2){
        this.calMiddleFee() // 计算费用
      }

      this.step++
    },
    // 获取商品
    getGoods(){
      this.goodsLoading = true
      const params = deepCopy(this.goodsParams)
      params.warehouseId = this.currentForm.warehouseId
      getMiddleWorkGoodsList(params)
        .then(res=>{
          this.goodsLoading = false
          this.goodsData = res.data.map(item=>{
            item.otherGoodsList.forEach(_other=>{
              _other.editNum = 0; // 编辑箱子数
            })
            return item
          })
          this.changeGoodsData()
          this.total = res.info.total
        })
    },
    searchGoods(){
      this.goodsParams.page = 1;
      this.getGoods()
    },
    // 修改数量 添加数据到对应的数组上
    changeMiddleNum(row){
      if(row.currentMiddleNum === undefined){
        row.currentMiddleNum = 0
      }
      const add = row.currentMiddleNum > 0
      const index = this.chooseGoodsList.findIndex(item => item.id === row.id)
      if(add){
        if(index === -1){
          this.chooseGoodsList.push(row)
        }
      }else{
        if(index !== -1){
          this.chooseGoodsList.splice(index,1)
        }
      }
    },
    // 显示示意图
    showShipmentImage(){
      this.$refs.shipmentImage.clickHandler()
    },
    // 上传完成
    uploadShipmentFinish(){
      if(this.importData.failData.length > 0){
        this.importResultDialog = true
      }else{
        this.importDialog = false
        this.importData.goodsData.forEach(item=>{
          this.changeMiddleNum(item)
        })
        this.changeGoodsData()
      }
    },
    // 改变goodsData里面当前操作的数量
    changeGoodsData(){
      this.goodsData.forEach(item=>{
        this.chooseGoodsList.some(_item=>{
          if(_item.id === item.id){
            item.currentMiddleNum = _item.currentMiddleNum
            return true
          }
        })
      })
    },
    // 选择调货
    chooseDistribution(row){
      this.distributionDialog = true
      this.distributionGoods = deepCopy(row)
    },
    addDistributionGoodsData(){
      const needNum = this.distributionGoods.needDistributionNum
      const editNum = this.distributionGoods.otherGoodsList.reduce((prev,cur)=>{
        cur.distributionNum = cur.distributionNum ? cur.distributionNum : 0
        return prev + cur.distributionNum
      },0)
      if(needNum !== editNum){
        this.$errorMessage(this.$t('middle.调货数量应为',{num: needNum}))
        return;
      }
      let row = this.goodsDistributionTable.find(item=> item.id === this.distributionGoods.id)
      row.otherGoodsList.forEach(item=>{
        const _row = this.distributionGoods.otherGoodsList.find(_item => _item.id === item.id)
        if(_row){
          item.distributionNum = _row.distributionNum
        }
      })
      this.distributionDialog = false
    },
    // 提交数据
    confirmMiddle(){
      if(!this.currentSkuNum || !this.currentGoodsNum){
        this.$errorMessage(this.$t('middle.请选择本次中转送仓商品'))
        return;
      }
      if(!this.currentForm.boxPDF){
        this.$errorMessage(this.$t('middle.请上传箱标'));
        return
      }


      const postData = {
        ogAccountId: this.account.accountId, // 店铺id
        goodsData: deepCopy(this.chooseGoodsList), // 数据
        boxPDF: this.currentForm.boxPDF,
        middlePDF: this.currentForm.middlePDF,
        boxNum: this.currentBoxNum,
        remark: this.remark,
        sendType: this.currentForm.sendType,
        officialWarehouseId: this.currentForm.officialWarehouseId,
        warehouseId: this.currentForm.warehouseId,
      }
      this.btnLoading = true
      saveMiddleWorkOrder(postData)
        .then(res=>{
          this.isSubmit = true
          this.btnLoading = false

          if(res.error === rechargeTipsCode){
            EventBus.$emit(rechargeTips)
            return;
          }
          if(res.error === 0){
            this.$successMessage(this.$t('common.successful'))
            if(res.data.labelOrderId){
              jumpLabelOrderInfo(res.data.labelOrderId)
            }else{
              jumpMiddleInfo(res.data.middleWorkOrderId)
            }
          }else{
            this.$errorMessage(res.message)
          }
        })
        .catch(()=>{
          this.btnLoading = false
        })
    },
    // 合并单元格
    objectSpanMethod1({ row, column, rowIndex, columnIndex }){
      const mergeCell = this.mergeCell1()
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    mergeCell1(){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'image',
        'title',
        'goodsId',
        'inventoryId',
        'sumSendNum'
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      this.chooseGoodsList.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并
        if(item.id && item.id === this.chooseGoodsList[index - 1].id){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }){
      const mergeCell = this.mergeCell2()
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    mergeCell2(){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'goodsId',
        'sumStockNum',
        'inventoryId',
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      this.editSendGoods.table.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并
        if(
          (item.suitListId && item.suitListId === this.editSendGoods.table[index - 1].suitListId) ||
          (item.isSystemLabel && item.isSystemLabel === this.editSendGoods.table[index - 1].isSystemLabel) ||
          (item.isTB && item.isTB === this.editSendGoods.table[index - 1].isTB)
        ){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
    // 选择仓库
    chooseWarehouse(warehouse){
      if(this.currentForm.officialWarehouseId === warehouse.id){
        return
      }
      this.currentForm.officialWarehouseId = warehouse.id
      this.currentForm.sendType = ''
      this.warehouse = warehouse
      this.showSendTypeList.some(item=>{
        this.chooseSendType(item.type)
        return true;
      })
    },
    // 选择送仓方式
    chooseSendType(sendType){
      if(this.currentForm.sendType === sendType){
        return
      }
      this.currentForm.sendType = sendType
    },
    // 选择送仓数量
    showSendDialog(row){
      this.editSendNumDialog = true;
      this.editSendGoods.goods = deepCopy(row)
      this.editSendGoods.table = deepCopy(row.otherGoodsList)
      this.editSendGoods.table.forEach(item=>{
        const chooseGoodsItem = this.chooseGoodsList.find(_item=> _item.id === row.id && item.suitListId === _item.fromSuitListId)
        if(chooseGoodsItem){
          chooseGoodsItem.boxInfo.some(box=>{
            if(box.goodsNumInBox === item.goodsNumInBox){
              item.editNum = box.editNum
              return true
            }
            return false
          })
        }
      })
      console.log(this.editSendGoods)
    },
    // 获取库存总数
    getEditSumStockNum(row){
      return this.editSendGoods.table.filter(item => item.isTB === row.isTB && item.suitListId === row.suitListId).reduce((prev,cur)=>{
        return prev + cur.sumMiddleStockNum
      },0)
    },
    // 新加对应的商品
    addChooseGoodsList(){
      // 判断是增加还是移除
      const flag = this.editSendGoods.table.some(item =>{
        if(!item.editNum){
          item.editNum = 0
        }
        if(item.editNum > 0){
          return true
        }
        return false;
      })


      if(flag){
        const copyChooseList = this.chooseGoodsList.filter(item => this.editSendGoods.goods.id !== item.id)
          .map(item=>{
            return item;
          })
        const obj = {
          id: this.editSendGoods.goods.id,
          accountType: this.editSendGoods.goods.accountType,
          attributes: this.editSendGoods.goods.attributes,
          goodsId: this.editSendGoods.goods.goodsId,
          image: this.editSendGoods.goods.image,
          inventoryId: this.editSendGoods.goods.inventoryId,
          sku: this.editSendGoods.goods.sku,
          status: this.editSendGoods.goods.status,
          suitId: this.editSendGoods.goods.suitId,
          suitListId: this.editSendGoods.goods.suitListId,
          title: this.editSendGoods.goods.title,
          weight: this.editSendGoods.goods.weight,
          length: this.editSendGoods.goods.length,
          width: this.editSendGoods.goods.width,
          height: this.editSendGoods.goods.height,
          variationId: this.editSendGoods.goods.variationId
        }
        const obj2 = {};
        let check = this.editSendGoods.table.every(item=>{
          if(item.editNum > 0){
            const key = item.isTB ? 'TB' : item.suitListId
            if(!obj2[key]){
              obj2[key] = []
            }
            const maxBoxNum = item.middleStockNum
            obj2[key].push({
              goodsNumInBox: item.goodsNumInBox,
              editNum: item.editNum,
            })
            let currentNum = item.editNum
            copyChooseList.forEach(choose=>{
              if(choose.fromSuitId === item.suitId && choose.fromIsTB === item.isTB && choose.fromSuitListId === item.suitListId){
                currentNum = choose.boxInfo.filter(boxItem=> boxItem.goodsNumInBox === item.goodsNumInBox)
                  .reduce((prev,boxItem)=>{
                    return prev + boxItem.editNum
                  },currentNum)
              }
            })
            if(currentNum > maxBoxNum){
              this.$errorMessage(item.goodsId+ ":" + item.goodsNumInBox + '/箱，箱子数量超出库存');
              return false
            }
            return true
          }
          return true;
        })
        // 箱子不足返回
        if(!check){
          return;
        }

        for (const fromSuitListId in obj2) {
          let goodsItem = {}
          if(fromSuitListId !== 'TB'){
             goodsItem = this.editSendGoods.table.find(item=> item.suitListId === Number(fromSuitListId))
          }else{
             goodsItem = this.editSendGoods.table.find(item => item.isTB)
          }
          obj.fromSuitId = goodsItem.suitId
          obj.fromSuitListId = goodsItem.suitListId
          obj.fromGoodsId = goodsItem.goodsId
          obj.fromSku = goodsItem.sku
          obj.fromInventoryId = goodsItem.inventoryId
          obj.fromIsTB = goodsItem.isTB
          obj.fromVariationId = goodsItem.variationId
          obj.boxInfo = obj2[fromSuitListId]
          copyChooseList.push(deepCopy(obj))
        }
        this.chooseGoodsList = copyChooseList
      }else{
        let index = 0
        while (index !== -1){
          index = this.chooseGoodsList.findIndex(item=> this.editSendGoods.goods.id === item.id)
          if(index !== -1){
            this.chooseGoodsList.splice(index,1)
          }else{
            break;
          }
        }
      }

      this.editSendNumDialog = false
    },
    getStraightSendNum(row){
      return row.boxInfo.reduce((prev,cur)=>{
        return prev + (cur.editNum * cur.goodsNumInBox)
      },0)
    },
    getDistributionSendNum(row){
      return this.chooseGoodsList.filter(item => item.id === row.id)
        .reduce((prev,cur)=>{
          return prev + this.getStraightSendNum(cur)
        },0)
    },
    // 上传箱标
    uploadBoxPDFSuccess(file){
      this.currentForm.boxPDF = file
    },
    // 上传送仓单
    uploadMiddlePdfSuccess(file){
      this.currentForm.middlePDF = file
    },
    // 计算送仓费用
    calMiddleFee(){
      const goodsListNum = [];
      const postData = {
        boxNum: this.currentBoxNum,
        goodsListNum: goodsListNum,
        sendType: this.currentForm.sendType,
        stickerLabelNum: 0,
        ogAccountId: this.account.accountId,
      }
      //
      this.chooseGoodsList.forEach(item=>{
        goodsListNum.push({
          suitId: item.suitId,
          suitListId: item.suitListId,
          boxInfo: item.boxInfo,
        })
      })
      postData.stickerLabelNum = this.goodsDistributionTable.reduce((prev,item)=>{
        return prev + this.getStraightSendNum(item)
      },0)
      this.calLoading = true
      calMiddleFee(postData)
        .then(res=>{
          this.calLoading = false
          this.calInfo.transfer2warehouse = res.data.transfer2warehouse
          this.calInfo.labelFee = res.data.labelFee
          this.calInfo.boxLabelFee = res.data.boxLabelFee
          this.calInfo.charteredCarFee = res.data.charteredCarFee
          this.calInfoFee=[this.calInfo]
        })
    }
  },
  // 路由跳转离开提示
  beforeRouteLeave(to,from,next){
    if(this.step > 1 && !this.isSubmit){
      setTimeout(()=>{
        this.$warning(this.$t('shipment.exitPageText2'),{
          title: this.$t('shipment.exitPageTitle'),
        }).then(()=>{
          next();
        }).catch(() => {
          next(false);
        })
      },0)
    }else{
      next()
    }
  },
}

</script>

<style>
.import-dialog{
  .el-dialog{
    background-color: #fdf6ec;
  }
}
.my-custom-dialog .el-dialog__body {
  background-color: rgba(253, 246, 236, 1);
}
.my-custom-dialog .el-dialog__header {
  background-color: rgba(253, 246, 236, 1);
}
</style>

<style scoped lang="scss">
.wrap {
  padding: 20px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0px 0 0;
  }

  .step-tips{
    margin-top: 10px;
    font-size: 12px;
    color: #AAAAAA;
  }
  .step-content{

    .account-list{
      .haveGoodsButton{
        color: #67C23A;
        border-color: #67C23A;
        background-color: #f0f9eb;
      }
    }
    .goods-table{
      margin-top: 20px;
    }
    .box-card{
      background-color: #f2f2f2;
      font-weight: 500;
      .line{
        display: flex;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
    .storageForm{
      margin-top: 30px;
    }
  }


  .footer{
    margin-top: 30px;
  }
}
.upload-content{
  color: #000000;
  font-size: 14px;
  line-height: 18px;
  .content{
    font-weight: 400;
  }
}
</style>
